<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户端-即时通信</title>
    <link rel="stylesheet" href="./layui2_9/css/layui.css">
    <style type="text/css">
        #container {
            width: 550px;
            height: 350px;
            border: 1px solid #7b6b6b;
            margin: 0 auto;
            position: relative;

        }

        #content {
            width: 550px;
            height: 300px;
            border-bottom: 1px solid #ccc;
            overflow-y: auto;

        }

        #content ul {
            margin: 0;
            padding: 0;

        }

        #Img {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 10px;
            top: 310px;
            border-radius: 15px;

        }

        #txt {
            margin: 0;
            position: absolute;
            left: 45px;
            top: 305px;
            border-radius: 2px;
            border: 1px solid #ccc;
            width: 423px;
            height: 40px;
            font-size: 20px;

        }

        #btn {
            margin-right: 10px;
            position: absolute;
            margin: 0;
            left: 477px;
            top: 305px;

        }

        #edit {
            background: #ece7e766;
            width: 297px;
            height: 50px;

        }

        .showTxt {
            width: auto;
            height: auto;
            max-width: 230px;
            background: #008000a8;
            border: 0;
            font-size: 15px;
            color: white;
            padding: 5px;
            border-radius: 2px;
            word-break: break-all;
            list-style: none;
            margin-top: 5px;
            display: list-item;

        }

        .left {
            text-align: left;
            margin-left: 50px;
            float: left;

        }

        .right {
            text-align: right;
            margin-right: 50px;
            float: right;

        }

        .showImg {
            width: 26px;
            height: 26px;
            border-radius: 13px;

        }

        .leftImg {
            left: 10px;
            position: absolute;

        }

        .rightImg {
            right: 10px;
            position: absolute;

        }

        #scroll {
            position: relative;

        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">


    <!-- 内容主体区域-->
    <div class="layui-body">
        <div style="padding: 10px;" class="layui-fluid">

            <div class="layui-row">

                <!--群聊消息区-->
                <div class="layui-col-md5">
                    <fieldset class="layui-elem-field">
                        <legend>你与<span id="username">小灰</span>私聊消息区：</legend>
                        <form id="talk" class="layui-form layui-form-pane" lay-filter="formFilter" action="javascript:void(0)" method="post" style="padding: 30px;">
                            <div class="layui-form-item layui-form-text">
                                <div class="layui-input-block">
                                    <div id="container">
                                        <div id="content">
                                            <div id="scroll">
                                                <ul id="save"></ul>
                                            </div>
                                        </div>
                                        <div id="edit">
                                            <img src="layui2_9/images/user01.jpg" id="Img">
                                            <input type="text" name="" id="txt">
                                            <button type="button" class="layui-btn layui-bg-red layui-btn" id="btn">发送</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </fieldset>
                </div>


            </div>

        </div>

    </div>

</div>
<script src="./layui2_9/layui.js"></script>
<script>
    var username = window.sessionStorage.getItem("username");
    document.getElementById("username").innerHTML = username;
    //JavaScript代码区域
    layui.use('element', function () {
        var element = layui.element;
        //监听导航点击
        element.on('nav(test)', function (elem) {
            //console.log(elem)
            layer.msg(elem.text());
        });
    });
</script>
<script>
    layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            layedit = layui.layedit,
            $ = layui.$,
            laydate = layui.laydate;

        //自定义验证规则
        form.verify({
            taskname: function (value) {
                if (value.length < 2) {
                    return '标题太短了啊';
                }
            },
            reward: function (value) {
                if (value.length <= 0) {
                    return '请输入奖励内容';
                }
            },
            taskcontext: function (value) {
                if (value.length < 1) {
                    return '任务详细描述太短';
                }
            },
            publishScholName: function (value) {
                if (value.length <= 0) {
                    return '请选择学校';
                }
            }
        });

        //创建一个编辑器
        layedit.build('LAY_demo_editor');

        //监听提交
        form.on('submit(reform)', function (data) {
            /*layer.alert(JSON.stringify(data.field), {
                title : '最终的提交信息'
            })*/
            //return false;
        });


        $(function () {
            form.on('select(publishSchoolId)', function (data) {
                $("#publishSchoolName").val(this.innerHTML);
            });


            $.post(
                "userNewtask.html",
                function (data) {
                    var obj = JSON.parse(data);
                    var str = "";
                    for (var i = 0; i < obj.length; i++) {
                        var optionStr = "";
                        optionStr += "<option value='" + obj[i].schoolid + "'>" + obj[i].name + "</option>";
                        $("#publishSchoolId").append(optionStr);
                        form.render('select', 'formFilter');

                        $("#publishSchoolName").val(obj[0].name);
                    }
                }
            );
        });


    });


</script>
<script>
    layui.use(function(){
        var dropdown = layui.dropdown;
        // 绑定输入框
        dropdown.render({
            elem: '#ID-dropdown-demo-base-input',
            closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
            data: [{
                title: '中南大学',
                id: 101
            },{
                title: '湖南大学',
                id: 102
            },{
                title: '长沙大学',
                id: 103
            }],
            click: function(obj){
                this.elem.val(obj.title);
            },
            style: 'min-width: 235px;'
        })
    });
</script>
<script>
    var ws = new WebSocket("ws://localhost:8080/publicWS");

    ws.onopen = function(){
    };

    ws.onmessage = function(message){
        document.getElementById("talkMsg").innerHTML =  message.data;
    };

    ws.onclose = function(){
    };

    function sendMsg(){
        //WebSocket发送
        //var username = document.getElementById("username").innerText;
        //var message = document.getElementById("message").value;
        //ws.send(username + " : " + message);//我：大家好
        //document.getElementById("message").value = "";
    }

</script>
<script>
    //获取元素
    var oCont = document.getElementById('content');
    var oImg = document.getElementById('Img');
    var oTxt = document.getElementById('txt');
    var oBtn = document.getElementById('btn');
    var oSTxt = document.getElementsByClassName('showTxt');
    var oSave = document.getElementById('save');
    var num = 0;

    //切换头像
    oImg.onclick = function () {
        num++;
        if (num % 2 == 0)
            oImg.src = '1.jpg';
        else
            oImg.src = '2.png';

    }

    //发送事件
    oBtn.onclick = function () {
        addCon();

    }

    function addCon() {
        if (oTxt.value.trim().length == 0) {
            return;
        }

        //发送

        //定义需要添加的元素
        var newLi = document.createElement("li");
        var newImg = document.createElement('img');

        //添加对话框
        newLi.innerHTML = oTxt.value;
        newLi.className = 'showTxt right';
        oSave.appendChild(newLi);
        //oTxt.value = '';

        //添加头像
        newImg.src = oImg.src;
        newImg.className = 'showImg rightImg';
        newLi.appendChild(newImg);

        //清除浮动
        var div = document.createElement('div');
        div.style = 'clear:both';
        oSave.appendChild(div);

        //2秒后回复
        window.setTimeout(function(){

            //定义需要添加的元素
            var newLi = document.createElement("li");
            var newImg = document.createElement('img');

            //添加对话框
            newLi.innerHTML = oTxt.value;
            newLi.className = 'showTxt left';
            oSave.appendChild(newLi);
            oTxt.value = '';

            //添加头像
            newImg.src = "layui2_9/images/xsd.png";
            newImg.className = 'showImg leftImg';
            newLi.appendChild(newImg);
            var div = document.createElement('div');
            div.style = 'clear:both';
            oSave.appendChild(div);

        },1000);

    }
</script>
</body>
</html>
